<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>jsx小练习</title>
	</head>
	<body>
		<!--准备好一个容器-->
		<div id="test"></div>

		<!--引入React核心库-->
		<script src="../js/react.development.js"></script>
		<!--引入React-DOM  用于支持React操作ROM-->
		<script src="../js/react-dom.development.js"></script>
		<!--引入babel  将jsx转为js-->
		<script src="../js/babel.min.js"></script>
		<script type="text/babel">
			/*此处 type一定是babel*/
			/*
                一定注意区分：【js语句（代码）】和【js表达式】
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
                    下面这些都是表达式
                    (1). a
                    (2). a+b
                    (3). demo(1)
                    (4). arr.map()
                    (5). function test() {}
                2.语句(代码)
                    下面这些都是语句(代码)
                    (1). if(){}
                    (2). for(){}
                    (3). switch(){case:xxx}
            */
			const data = ["Angular", "React", "Vue"];
			// 1.创建虚拟DOM
			const VDOM = (
				<div>
					<h1>前端js框架列表</h1>
					<ul>
						{data.map((item, index) => {
							return <li key={index}>{item}</li>;
						})}
					</ul>
				</div>
			); /*此处一定不要写引号 是虚拟dom不是字符串*/

			// 2.渲染虚拟DOM到页面
			ReactDOM.render(VDOM, document.getElementById("test"));
		</script>
	</body>
</html>
